// contextual help, messages

body.caerp {
	.context_help {
		font-size: .875rem;

		h4 {
			padding: var(--padding-s) 0;
		}

		p {
			font-size: .825rem;
			padding: 5px 0;
		}

		dt {
			margin-top: var(--padding-m);
		}
	}

	.message {
		margin-bottom: var(--padding-m);
		padding: var(--padding-s) 0;

		&.success {
			svg {
				fill: var(--func-positive-color);
			}
		}

		&.error {
			svg {
				fill: var(--func-negative-color);
			}
		}

		&.caution {
			svg {
				fill: var(--func-caution-color);
			}
		}

		&.neutral {
			svg {
				fill: var(--func-neutral-color);
			}
		}
	}

	.alert {
		background: var(--message-default-background-color);
		border-left: 5px solid var(--message-default-border-color);
		margin: var(--padding-m) 0;
		padding: var(--padding-xl);
		position: relative;
		font-size: .875rem;

		>.icon {
			line-height: 1.5;
		}

		&.status {
			border-left-width: 0;
			text-align: center;
		}

		&.alert-info {
			background: var(--message-info-background-color);
			border-left-color: var(--func-neutral-color);

			.icon:not(.status) svg {
				fill: var(--func-neutral-color);
			}
		}

		&.alert-danger {
			background: var(--message-danger-background-color);
			border-left-color: var(--func-negative-color);

			.icon:not(.status) svg {
				fill: var(--func-negative-color);
			}
		}

		&.alert-success {
			background: var(--message-success-background-color);
			border-left-color: var(--func-positive-color);

			.icon:not(.status) svg {
				fill: var(--func-positive-color);
			}
		}

		&.alert-warning {
			background: var(--message-warning-background-color);
			border-left-color: var(--func-caution-color);

			.icon:not(.status) svg {
				fill: var(--func-caution-color);
			}
		}

		h2,
		h3,
		h4 {
			padding-bottom: var(--padding-s);
		}

		ul,
		ol {
			margin-bottom: 0;
			margin-top: 0;
		}

		ul {
			padding-top: var(--padding-s);
		}

		button.close {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	>.notification .alert {
		align-items: center;
		border-left-width: 0;
		display: flex;
		height: 3rem;
		justify-content: center;
		margin: 0;
		overflow-y: hidden;
		padding: 0;

		>.icon:not(.status) {
			align-items: center;
			align-self: stretch;
			background: var(--func-neutral-color);
			display: flex;
			flex: 0 0 3rem;
			justify-content: center;
			margin: 0;

			svg {
				fill: var(--svg-invert-fill-color);
				height: 2rem;
				width: 2rem;
			}
		}

		>button.icon.close {
			position: static;
		}

		&.alert-info>.icon:not(.status) {
			background: var(--func-neutral-color);

			svg {
				fill: var(--svg-invert-fill-color);
			}
		}

		&.alert-danger>.icon:not(.status) {
			background: var(--func-negative-color);

			svg {
				fill: var(--svg-invert-fill-color);
			}
		}

		&.alert-success>.icon:not(.status) {
			background: var(--func-positive-color);

			svg {
				fill: var(--svg-invert-fill-color);
			}
		}

		&.alert-warning>.icon:not(.status) {
			background: var(--func-caution-color);

			svg {
				fill: var(--svg-invert-fill-color);
			}
		}

		>div {
			max-height: 3rem;
			line-height: 1.25;
			overflow-y: auto;
			padding: var(--padding-xs) var(--padding-m);;
		}
	}

	.border_left_block .alert {
		border-left: 0 none;
	}

	.action_feedback {
		position: relative;

		&::after {
			animation: dismiss_anim .5s ease-out 1s forwards;
			background-color: var(--func-neutral-color);
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: 1.5em auto;
			border-radius: 50%;
			box-shadow: 0 2px 4px var(--box-shadow-color);
			content: "";
			display: block;
			height: 3em;
			position: absolute;
			right: var(--padding-m);
			top: var(--padding-m);
			width: 3em;
		}

		&.success {
			&::after {
				background-color: var(--func-positive-color);
				background-image: url("../icons/check.svg");
			}
		}
	}

	blockquote {
		background: var(--message-default-background-color);
		border-left: 5px solid var(--message-default-border-color);
		font-size: .875rem;
		margin: 0;
		padding: .6rem;
		position: relative;

		h5 {
			font-weight: bold;

			+p {
				padding-top: var(--padding-s);
			}
		}

		button.unstyled,
		.btn.unstyled,
		.btn-container {
			float: right;
			margin: -.6rem -.6rem var(--padding-s) 1rem;
			shape-outside: margin-box;

			~p:only-of-type,
			~h5:only-child {
				min-height: 2rem;
			}
		}

		.btn-container {
			margin: 0;
		}

		footer {
			border: unset;
			clear: right;
			color: var(--message-footer-color);
			font-size: .75rem;
			padding-top: var(--padding-s);
			text-align: right;

			&::before {
				content: "";
			}

			.icon svg {
				fill: var(--message-footer-color);
				vertical-align: text-top;
			}
		}

		.icon.status {
			align-items: center;
			background: var(--message-default-border-color);
			border-radius: 0;
			bottom: 0;
			display: flex;
			height: auto;
			justify-content: center;
			left: 0;
			position: absolute;
			top: 0;
			width: 2rem;

			svg {
				fill: var(--static-invert-color);
			}
		}

		&[class] {
			border-width: 0;
			padding-left: 2.6rem;
		}

		&.unknown {
			border-width: 5px;
			padding-left: .6rem;
		}

		&.success,
		&.valid,
		&.completed,
		&.partial_unpaid,
		&.action_pending {
			background: var(--message-success-background-color);
		}

		&.caution,
		&.wait,
		&.danger {
			background: var(--message-warning-background-color);
		}

		&.error,
		&.invalid,
		&.cancelled,
		&.failed,
		&.unpaid {
			background: var(--message-danger-background-color);
		}

		&.neutral,
		&.planned {
			background: var(--message-info-background-color);
		}

		.btn.small {
			margin: var(--padding-s) var(--padding-s) 0 0;
		}
	}

	.memos.status_history>ul {

		/* Not applied in popin */
		>li:only-child blockquote:not(.pinned)>div {
			clip-path: polygon(0 0, 100% 0, 100% 18.75rem, 0 18.75rem);
			max-height: 18.75rem;
			-webkit-mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 18rem, var(--static-transparent) 18.75rem);
			mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 18rem, var(--static-transparent) 18.75rem);
		}

		>li:nth-child(2):last-child blockquote:not(.pinned)>div,
		>li:nth-last-child(2):first-child blockquote:not(.pinned)>div {
			clip-path: polygon(0 0, 100% 0, 100% 13.75rem, 0 13.75rem);
			max-height: 13.75rem;
			-webkit-mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 13rem, var(--static-transparent) 13.75rem);
			mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 13rem, var(--static-transparent) 13.75rem);
		}

		>li>blockquote:not(.pinned)>div {
			clip-path: polygon(0 0, 100% 0, 100% 7.75rem, 0 7.75rem);
			max-height: 7.75rem;
			-webkit-mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 7rem, var(--static-transparent) 7.75rem);
			mask-image: linear-gradient(180deg, var(--static-color) 0%, var(--static-color) 7rem, var(--static-transparent) 7.75rem);
			cursor: pointer;
		}
	}

	.status_history, .timeline {
		h4 {
			padding-top: .5em;

			.btn.unstyled {
				margin-top: -.75em;
			}
		}

		ul {
			list-style-type: none;
		}

		li {
			margin: var(--padding-s) 0;
			padding: 0;

			blockquote {
				margin: 0;
			}
		}
	}

	.status_history {
		li:nth-child(n + 2) {
			margin: var(--padding-s) 0;

			blockquote {
				padding-bottom: .4rem;
				padding-top: .4rem;

				footer {
					padding-top: var(--padding-xs);
				}
			}
		}

		li:nth-child(n + 5) {
			margin: var(--padding-xs) 0;

			blockquote {
				padding-bottom: .25rem;
				padding-top: .25rem;

				p.status+p {
					padding-top: 0;
				}
			}
		}
	}

	.layout.two_cols>.status_history:not(.in_form) {
		flex: 0 1 25em;
		padding-left: 0;

		&:not(.memos) {
			flex-basis: 10em;
		}
	}

	.layout.two_cols.with_memos>div:nth-child(2) {
		flex: 0 1 25em;
	}

	.timeline {
		container-name: timeline-layout;
		container-type: inline-size;
		padding: var(--padding-s) 0;

		div.layout.flex {
			align-items: flex-start;
			justify-content: space-between;
		}

		button.sorting {
			float: right;

			svg:nth-child(2) {
				display: none;
			}
		}

		ul {
			display: flex;
			flex-direction: column;
			margin-top: var(--padding-m);
		}

		li {
			margin: 0 0 0 2rem;
			flex: 0 0 calc( 100% - 4rem );
			position: relative;

			&:nth-child(n+2) {
				margin-left: 2rem;
			}

			&::before {
				border-left: 1px dashed var(--border-color);
				bottom: 0;
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: 0;
				width: 0;
			}

			&:first-child::before {
				top: 50%;
			}

			&:last-child::before {
				bottom: 50%;
			}

			&::after {
				background: var(--border-color);
				border-radius: 50%;
				bottom: -.25rem;
				content: "";
				display: block;
				left: -.25rem;
				height: .5rem;
				position: absolute;
				width: .5rem;
			}

			&:last-child::after {
				display: none;
			}

			&.action.reduced {
				position: relative;

				> .btn {
					left: -1.1875rem;
					margin-top: -1.25rem;
					position: absolute;
					top: 50%;
					z-index: $stickyContentLayer;

					+ blockquote {
						display: none;
					}
				}

				&.open {
					> .btn + blockquote {
						display: block;
					}
				}

				&:not(.open) {
					min-height: 3.5rem;
				}
			}
		}

		blockquote {
			padding-left: .6rem;
			position: static;

			&::after {
				border-top: 1px dashed var(--border-color);
				content: "";
				display: block;
				left: 0;
				position: absolute;
				top: 50%;
				width: 3rem;
				z-index: $contentLayer;
			}

			.icon.status {
				height: 2rem;
				left: -1rem;
				margin-top: -1rem;
				top: 50%;
				z-index: $stickyContentLayer;
			}

			&.future {
				opacity: .75;
				&:hover,
				&:focus-within {
					opacity: 1;
				}
			}

			&.current {
				outline: 1px solid var(--func-positive-color);

				&::after {
					border-color: var(--func-positive-color);
				}
			}

			&.caution {
				outline: 1px solid var(--func-caution-color);

				&::after {
					border-color: var(--func-caution-color);
				}
			}

			div.layout.flex {
				align-items: flex-end;
				flex-wrap: nowrap;
				width: 100%;

				p {
					flex: 1 1 auto;
				}
				.btn-container {
					flex: 0 0 content;

					.btn.small {
						margin: 0 0 0 var(--padding-s);
						white-space: nowrap;
					}
				}
			}
		}

		&.reverse {
			ul {
				flex-direction: column-reverse;
			}

			li {
				&:first-child::before {
					top: 0;
					bottom: 50%;
				}

				&:last-child::before {
					bottom: 0;
					top: 50%;
				}

				&:last-child::after {
					display: block;
				}

				&:first-child::after {
					display: none;
				}
			}

			button.sorting {

				svg:nth-child(1) {
					display: none;
				}

				svg:nth-child(2) {
					display: block;
				}
			}

		}

	}

	.main_area .timeline {
		li {
			padding: .5rem 0 .5rem 3rem;
		}
	}

	.version {
		h2 small {
			font-size: 1rem;
			padding-left: var(--padding-l);
		}

		h3,
		h4 {
			border-bottom: 1px solid var(--border-color);
			margin: var(--padding-m) var(--padding-s) 0 0;

			.icon {
				margin-right: .5rem;

				svg {
					vertical-align: baseline;
				}
			}
		}

		.collapse_content > h3 {
			margin-left: var(--negative-padding-l);
		}
	}

	.version_notes {
		list-style-type: none;
		padding: 0 var(--padding-s) var(--padding-m) 1.875rem;

		&:last-child {
			padding-bottom: var(--padding-m)
		}

		h4,
		h5 {
			border-bottom: unset;
			font-size: 1rem;
			font-weight: bold;
			padding: var(--padding-s) 0;
		}

		li {
			margin: var(--padding-s) 0 var(--padding-m);
			padding: 0;
		}

		p,
		a {
			font-size: .9rem;
			margin-bottom: var(--padding-s);
		}

		.icon.tag {
			font-size: .75rem;
		}
	}
}

@container timeline-layout ( width > 35rem ) {
	body.caerp .main_area .timeline {
		ul {
			padding-bottom: 1rem;
		}

		li {
			margin-bottom: -1.5rem;
			margin-top: -1.5rem;
			padding-bottom: 0;
			padding-top: 0;
			width: 50%;

			&::before {
				bottom: 1rem;
				top: 1rem;
			}

			&:first-child::before {
				top: 50%;
			}

			&:last-child::before {
				bottom: 50%;
			}

			&::after {
				bottom: .5rem;
			}

			&:nth-child(odd) {
				align-self: flex-start;
				margin: 0 2rem 0 0;
				padding-left: 0;
				padding-right: 3rem;

				&::before {
					left: auto;
					right: -1px;
				}

				&::after {
					left: auto;
					right: -.25rem;
				}

				blockquote {
					&::after {
						left: auto;
						right: 0;
					}

					.icon.status {
						left: auto;
						right: -1rem;
					}
				}
			}

			&.action:nth-child(odd) {
				> .btn {
					left: auto;
					right: -1.1875rem;
				}
			}

			&:nth-child(even) {
				align-self: flex-end;
			}

			blockquote {
				min-height: 4.25rem;
			}

			&.action.reduced {
				min-height: 5.25rem;
				&::before {
					top: 0;
				}
			}

			&.estimation,
			&.pay_off {
				align-self: center;
				margin: 0;
				padding: 0;
				&::before {
					left: 50%;
				}
				&::after {
					right: calc( 50% - .25rem );
					left: auto;
				}
				blockquote {
					&::after {
						display: none;
					}
					.icon.status {
						left: auto;
						right: calc( 50% - 1rem );
					}
				}
			}
		}

		&.reverse {
			li {
				&.action.reduced {
					margin-bottom: 0;
					margin-top: 0;
					> .btn,
					.icon.status {
						top: 35%;
					}
					&::before {
						top: -.5rem;
					}
				}
			}
		}

		&.reverse li.pay_off,
		li.estimation {
			padding: 0 0 5rem;
			&::before {
				bottom: 0;
				top: calc( 100% - 5rem );
			}
			.icon.status {
				bottom: 2rem;
				top: auto;
			}
		}

		li.pay_off,
		&.reverse li.estimation {
			padding: 4rem 0 0;
			&::before {
				bottom: calc( 100% - 4rem );
				top: -1rem;
			}
			.icon.status {
				bottom: auto;
				top: 1.5rem;
			}
		}
	}
}

@media (max-width: $wideWidth ) {
	body.caerp p.help {
		padding: var(--padding-s) 0 var(--padding-m);
	}
}

@media (min-width: $tabletWidth ) {
	body.caerp .context_help {
		border-left: 1px dashed $fadedGrey;
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp .context_help {
		border-top: 1px dashed $fadedGrey;
		margin-top: var(--padding-m);

		ul {
			display: flex;
			flex-wrap: wrap;

			li {
				min-width: 15em;
				width: 50%;
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp {
		.alert {
			padding: var(--padding-m);
		}

		.main_area .timeline {
			li {
				padding-left: 2rem;
			}

			blockquote {
				&::after {
					width: 2rem;
				}
			}
		}
	}
}
